<template>
  <div class="eddy-container">
    <div v-for="item in 175" :key="item"></div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="scss" scoped>
.eddy-container {
  width: 100%;
  height: 100%;
  min-height: 200px;
  min-width: 200px;
  background: black;
  filter: blur(2px);

  div {
    border-radius: 25% 50% 100% 5%;
    position: absolute;
    top: 50%;
    left: 50%;
    height: 5px;
    width: 5px;
    transform: translate(-50%, -50%);
    animation: yeah 3s infinite;
  }
  @for $i from 1 through 175 {
    div:nth-child(#{$i}) {
      border: 2px solid rgba((252 - $i * 3), 0, 0, 0.5);
      height: $i * 2 + 10px;
      width: $i * 2 + 10px;
      animation-delay: $i * 0.05s;
      transform: translate(-50%, -50%) rotate(4.8deg * $i);
    }
  }
}
@keyframes yeah {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
    transform: translate(-50%, -50%) rotate(360deg);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
    transform: translate(-50%, -50%) rotate(0deg);
  }
}
</style>
